<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/layouts/taglib.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="${ctxLib }/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<title>栏目展示页</title>
<style type="text/css">  
	.ztree .line{
		    line-height: 0;
		    border-top:none;
    		float: none;
	}
    .ztree li span.button.ico_docu {  
        background-position: -110px 0;  
        margin-right: 2px;  
        vertical-align: top;  
	}  
</style>
</head>
<body class="pos-r">
<div class="pos-a" style="width:200px;left:0;top:0; bottom:0; height:100%; border-right:1px solid #e5e5e5; background-color:#f5f5f5; overflow:auto;">
	<ul id="treeDemo" class="ztree"  style="margin-top: 35px;"></ul>
	<input type="hidden"  id="curId"  >
</div>
<div style="margin-left:200px;">
	<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 产品管理 <span class="c-gray en">&gt;</span> 产品列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
	<div class="page-container">
		<div class="cl pd-5 bg-1 bk-gray mt-20"> 
			<span class="l">
				<a href="javascript:;" onclick="category_addRoot('新增根栏目','${ctx}/category/add')" class="btn btn-success radius"><i class="Hui-iconfont">&#xe717;</i> 新增根栏目</a>
				<a href="javascript:;" onclick="category_add('新增子栏目','${ctx}/category/add')" class="btn btn-secondary radius"><i class="Hui-iconfont">&#xe600;</i> 新增子栏目</a> 
				<a href="javascript:;" onclick="category_edit('编辑栏目','${ctx}/category/edit?id=${category.id }')" class="btn btn-primary radius"><i class="Hui-iconfont">&#xe6df;</i> 编辑栏目</a>
				<a href="javascript:;" onclick="datadel('${category.id}')" class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i> 删除栏目</a> 
				<a href="javascript:;" onclick="combo()" class="btn btn-warning radius"><i class="Hui-iconfont">&#xe645;</i> 生成栏目</a> 
			</span> 
		</div>
		<div  id="content" class="cl  pd-10   bk-gray mt-20  radius">
			<c:if test="${category != null }">
			<div class="row">
				<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>栏目名称:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.name}</div>
				</div>
				<div class="col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>英文名称:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.enName}</div>
				</div>
			</div>
			<div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>父目录:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.parentName }</div>
				</div>
				<div class="col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>相对路径:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.path }</div>
				</div>
		    </div>
		    <div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>列表页模板:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5"> ${category.listName }
						<button class="btn btn-success radius"   onclick="selectTemplate('${category.id}',1);"><i class="Hui-iconfont">&#xe6bf;</i>  选择模板</button>
					</div>
				</div>
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>内容页模板:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5"> ${category.contentName }
						<button class="btn btn-success radius"  onclick="selectTemplate('${category.id}',2);"><i class="Hui-iconfont">&#xe6bf;</i>  选择模板</button>
					</div>
				</div>
		    </div>
		    <div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>列表页路径:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.path }/index.html</div>
				</div>
				<div class="col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>内容页路径:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.path }/{@Id}.html</div>
				</div>
		    </div>
			 <div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>打开方式:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">
					<c:choose>
						<c:when test="${category.target == '_blank' }">新窗口打开</c:when>
						<c:when test="${category.target == '_self' }">当前窗口打开</c:when>
						<c:when test="${category.target == '_parent' }">父窗口打开</c:when>
						<c:when test="${category.target == '_top' }">顶层窗口打开</c:when>
					</c:choose>
					</div>
				</div>
				<div class="col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>栏目排序:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.sort }</div>
				</div>
		    </div>
		    <div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>关键字:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5">${category.keywords }</div>
				</div>
				<div class="col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>上一次发布时间:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5"><c:if test="${category.publishDate !=null }"><fmt:formatDate value="${category.publishDate }" pattern="yyyy-MM-dd hh:mm:ss" /></c:if></div>
				</div>
		    </div>
		    <div class="row">
		    	<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>自定义字段:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5"> 
						<button class="btn btn-success radius"   onclick="field('${category.id}');"><i class="Hui-iconfont">&#xe725;</i>  自定义字段管理</button>
					</div>
				</div>
				<div class="f-l  col-sm-6">
					<div class="f-l  col-sm-3"><h3><small>页面预览:</small></h3></div>
					<div   class=" f-l  mt-25 col-sm-5"> <c:if test="${category.publishDate !=null }">
						<a href="${frontPage }${category.path }/index.html" target="_blank" class="btn btn-primary  radius"><i class="Hui-iconfont">&#xe695;</i> 页面预览</a>
						</c:if>
					</div>
				</div>
		    </div>
		    </c:if>
		    <c:if test="${category == null }">
		    	请点击左侧栏目
		    </c:if>
		</div>
	</div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="${ctxLib }/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctxLib }/layer/2.4/layer.js"></script>
<script type="text/javascript" src="${ctxStatic}/h-ui/js/H-ui.min.js"></script> 
<script type="text/javascript" src="${ctxStatic}/h-ui.admin/js/H-ui.admin.js"></script>
<!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本--> 
<script type="text/javascript" src="${ctxLib }/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="${ctxLib }/jquery.validation/1.14.0/messages_zh.js"></script>
<script type="text/javascript" src="${ctxLib }/shopUtil.js?v=1.0"></script>
<script type="text/javascript">
$(function(){
	setZTree();
});

function category_add(title,url){
	var pid = $('#curId').val();
	if(pid !="" && pid != null){
		category_open(title,url+"?parentId="+pid);
	}else{
		layer.alert("请选中一个父栏目");
	}
}

function category_addRoot(title,url){
	category_open(title,url);
}

function category_edit(title,url){
	var cid = $('#curId').val();
	if(cid !="" && cid != null){
		if(cid != 1){
			category_open(title,url);
		}else{
			layer.alert("根目录不能编辑");
		}
	}else{
		layer.alert("请选中一个栏目");
	}
}

function field(id){
	var url = "${ctx}/fieldCategory/list?id="+id;
	layer_show('自定义表单管理',url,'900');
}

function selectTemplate(id,type){
	var url = "${ctx}/category/changeTemplate?id="+id+"&&type="+type;
	layer_show('选择模板',url,'900');
}

/*打开新窗口*/
function category_open(title,url){
	var index = layer.open({
		type: 2,
		title: title,
		content: url
	});
	layer.full(index);
}

function setZTree(){
	 var setting = {
			 view: {
				fontCss : {"font-family": "微软雅黑", "font-size": "16px"}
			 },
			 data: {
					simpleData: {
						enable: true,
						idKey: "id",
						pIdKey: "pid",
						rootPId: 1
					}
			},
			callback: {
				onClick: function(event, treeId, treeNode){
					var id = treeNode.id;
					showCategory(id);
					$('#curId').val(id);
				}
			}
	};
	 var zNodes = JSON.parse('${tree}');
	 zTreeObj = $.fn.zTree.init($("#treeDemo"), setting,  zNodes);
	 var nodeid = "${category.id}";
	 if(nodeid != null && nodeid != ""){
		 var node = zTreeObj.getNodeByParam("id", nodeid);
		 zTreeObj.selectNode(node);
		 $('#curId').val(nodeid);
	 }
}

function showCategory(id){
	if(id != '1'){
		window.location.href="${ctx }/category/list?id="+id;
	}else{
		window.location.href="${ctx }/category/list";
	}
	
}

function datadel(cid){
	var pid = $('#curId').val();
	if(pid =="" || pid == null){
		layer.alert("请选中一个栏目");
		return;
	}
	layer.confirm('确认要删除该栏目吗？',function(index){
	$.ajax({
        type: 'POST',
        url: '${ctx}/category/delete',
        contentType: 'application/x-www-form-urlencoded',
        data:  {'cid':cid},
        dataType: 'json',
        success: function (data) {
            if (data.success) {
                layer.alert('删除成功', {
                	  closeBtn: 0
                }, function(){
                	showCategory('${category.parentId }');
               	});
            } else {
                layer.alert(data.message);
            }
        }
    });
	});
}

function combo(){
	var pid = $('#curId').val();
	if(pid =="" || pid == null){
		layer.alert("请选中一个栏目");
		return;
	}
	layer.confirm('确认要生成该栏目吗？',function(index){
		layer.closeAll();
		layer.load();
		$.ajax({
	        type: 'POST',
	        url: '${ctx}/category/toStaticHtml',
	        contentType: 'application/x-www-form-urlencoded',
	        data:  {'cid':pid},
	        dataType: 'json',
	        success: function (data) {
	        	layer.closeAll('loading');
	            if (data.success) {
	                layer.alert('生成成功', {
	                	  closeBtn: 0
	                },function(){
	                	showCategory(pid);
	               	});
	            } else {
	                layer.alert(data.message);
	            }
	        }
	    });
		});
}
</script> 
</body>
</html>